﻿@using WebApplicationFileSys.Models
@{
    ViewBag.Title = "文件列表";
    var list = ViewBag.listMy as List<FileInfoMy>;
    var userLogin = Session[KeyValueConfig.KeyUserSession];
    string adminAccount = System.Configuration.ConfigurationManager.AppSettings["user_admin"];
    bool isAdmin = userLogin.Equals(adminAccount);
    int imgId = 1;
}
@section css{

    <style type="text/css">
        .itemCell { display: inline-block; }
        .file_size { display: inline-block; min-width: 100px; text-align: right; padding-right: 28px;color:#144bae; }
        .fileBlock
        {
            font-size: 16px;
            margin: 2px;
            border-bottom:1px solid #e0e0e0;
            padding-bottom:3px !important;
        }
        p:hover { background: #4cff00; }
    </style>
}
<h1>文件列表</h1>
<div style="margin-bottom:100px;">
    @if (isAdmin)
    {
        <input type="button" value="创建文件夹" onclick="whlMkdir(this)" style="font-size:17px;width:102px;height:40px;position:fixed;right:10px;top:80px;z-index:1000;" />

        <a href="/file/Upload?dir=@ViewBag.dirNew" style=" -webkit-box-shadow:10px 10px 10px #dddddd;
    -moz-box-shadow:10px 10px 10px #dddddd;
    box-shadow:10px 10px 10px #dddddd;
    position:fixed;right:10px;top:140px;z-index:1000;background:#14c600;width:100px;height:50px;z-index:1388;
    display:block;text-align:center;line-height:50px;font-weight:bold;font-size:17px;color:white;
    " target="_blank">
            上传文件
        </a>
    }
    @if (list == null && list.Count == 0)
    {

    }
    else
    {
        foreach (var item in list)
        {
            string extend = Path.GetExtension(item.FileName).ToLower();
            bool imgIs = !string.IsNullOrWhiteSpace(extend) && ".jpg*.jpeg*.png*.jfif*.gif*.bmp*.webp*.ico".Contains(extend);
            string className = "";
            if (imgIs)
            {
                className = " img3";
            }
            <div class="layui-col-md12 fileBlock  @Html.Raw(className)" >
                <span class="itemCell" style="min-width:159px;">@item.CreateTime.ToString("yyyy-MM-dd HH:mm:ss")</span>
                @if (string.IsNullOrEmpty(item.FileSize))
                {
                    <span class="itemCell" style="min-width:150px;text-align:right;padding-right:23px;color:blue;font-weight:bold;">目录</span>
                    <span class="itemCell" style="width:70%;"><a href="/home/SeeDir?dirNew=@item.FileNamePath">@item.FileName</a></span>
                }
                else
                {
                    <span class="file_size">@item.FileSize</span>
                    <span class="itemCell" style="width:70%;font-weight:bold;font-size:16px;">
                        @if (imgIs)
                        {
                            @* 在线预览 *@
                            <a href=" /home/SeeImg?file=@item.FileNamePath" target="_blank">
                                <img id="img@(imgId)" src="" data-src="/home/SeeImg?file=@item.FileNamePath" style="height:100px;min-width: 32px" />
                            </a>
                            imgId++;
                        }
                        <a href="/home/SeeFile?file=@item.FileNamePath" target="_blank">@item.FileName</a>
                        @*<b>@item.FileType.ToString()</b>*@
                    </span>
                }
            </div>
        }
    }
</div>
<div style="display:none; " id="win_mkdir">
    <div style=" padding:30px;">
        <div style="font-size:16px;margin-bottom:30px;">文件夹名称，（对于英文符号）不允许包含\ / : * ? “ < > |</div>
        <div>
            <input type="text" id="txtFolder" style="font-size:23px;height:32px;line-height:32px;width:89%;" oninput="checkVal(this);" />
        </div>
        <div style="margin-top:30px;text-align:center;">
            <input type="button" value="确定" style="width:200px;height:38px;" onclick="doMkdir(this)" />
        </div>
    </div>
</div>
@section scripts{
    <script type="text/javascript">
       
        !function (w) {
            var index;
            w.addEventListener('scroll', function () {
                 watchImgShow();
            });

            /* 图片在可视区才展示  */
            w.watchImgShow = function () {
                //可见区域高度
                var clientHeight = document.documentElement.clientHeight;

                //滚动条滚动高度
                var scrollTop = document.documentElement.scrollTop;

                var scrollHeight = clientHeight + scrollTop;

                //  元素距离顶部高度
                //document.getElementById("k112").offsetTop;

                $("img[src='']").each(function (index, ele) {
                    /* 元素距离顶部高度 */
                    var dom_offsetTop = $(ele).offset().top;
                    if (scrollHeight >= dom_offsetTop) {
                        /* 元素进入可视区域 */
                        console.log(ele);
                        console.log("scrollHeight=" + scrollHeight + "，dom_offsetTop=" + dom_offsetTop);
                        
                        $(ele).attr("src", $(ele).attr("data-src"));
                        setTimeout(function (g) {
                            $(g).css("max-height", "100px");
                            $(g).css("height", "");
                        }, 100, ele);
                       
                    }
                });
            }
            watchImgShow();
         
          

            /* （弹窗）创建文件夹 */
            w.whlMkdir = function () {
                //$(button).attr("disabled", "disabled");
                 index = layui.layer.open({
                    type: 1,
                    area: ['480px', '280px'], // 宽高
                    title: "创建文件夹", // 不显示标题栏
                    //closeBtn: 1,
                    //shadeClose: true, // 点击遮罩关闭层
                    content: $("#win_mkdir").html(),

                    //btnAlign: 'c', // 按钮居中显示
                    //btn: ['确定', '取消' ],
                    //btn1: function ( ) {
                    //    console.log("确定---");
                    //    // do something
                    //    layer.close(index); // 关闭弹层
                    //},
                    //btn2: function () {
                    //    console.log("取消---");
                    //    layer.close(index);
                    //    //if (confirm('确定要关闭么')) {
                    //    //    layer.close(index);
                    //    //}
                    //    //return false; // 阻止默认关闭行为
                    //}
                });
            }

            /* 检查文件名 */
            w.checkVal = function (s) {
                var value = s.value;
                console.log(value);
                value = value.replace("\\", "");
                value = value.replace("/", "");
                value = value.replace(":", "");
                value = value.replace("*", "");
                value = value.replace("?", "");
                value = value.replace("\"", "");
                value = value.replace("<", "");
                value = value.replace(">", "");
                value = value.replace("|", "");
                s.value = value;

                //console.log("验证通过");
            }

            /* 执行，创建文件夹 */
            w.doMkdir = function (button) {
                //var name = $("#txtFolder").val().myTrim();
                //var name =$("#layui-layer1").find("#txtFolder").val().myTrim();
                var name = $(".layui-layer-content").find("#txtFolder").val().myTrim();
                if (name=="") {
                    layui.layer.msg("文件夹名称不可为空");
                    return;
                }
                $(button).attr("disabled", "disabled");
                $.ajax({
                    url: "@Url.Action("MkdirFolder", "file")",
                    type: "post",
                    data: {
                        folder: name,
                        dir:"@ViewBag.dirNew"
                    } ,
                    success: function (r) {
                        if (r.Code == 500) {
                            $(button).removeAttr("disabled");
                            layui.layer.alert("出错：" + r.Msg);
                        } else {
                            layer.close(index); // 关闭弹层
                            layui.layer.msg(r.Msg);
                            if (r.Data==2) {
                                setTimeout(function () {
                                    window.location.reload();
                                }, 1000);
                            }
                        }
                    }
                });
            }
        }(window);
    </script>
}
